<template>
    <fieldset>
      <legend>动态切换</legend>
      <button 
      v-for="(item,index) in btnAr" :key="index"
       :class="['tab-button',{active:activeBtn==item}]"
       @click="activeBtn=item"> 
      {{item}} </button>
        <div class="tab" :is="tab"></div>
    </fieldset>
</template>
<script>
  import email from "./email.vue"
  import home from "./Home.vue"
  import paylist from "./payList.vue"
      export default{
        data(){
            return {

              // name:"email",
              activeBtn:"email",
              btnAr:["email","home","paylist"],
              
            }
        },
        components:{
          "Tab-email":email,
          "Tab-home":home,
          "Tab-paylist":paylist
        },
        computed:{
          tab(){
            return  "Tab-"+this.activeBtn
          }
        }
      }
</script>
<style>
  .tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
  }

  .tab-button:hover {
    background: #e0e0e0;
  }

  .tab-button.active {
    background: orange;
  }

  .tab {
    border: 1px solid #ccc;
    padding: 10px;
  }

  h1 {
    margin: 0;
  }
</style>
